<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min1.css">
		<!--App自定义的css-->
		<link rel="stylesheet" href="../css/pravate/activity.css">
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="../js/mobile-detect.min.js"></script>
		<script type="text/javascript" src="../js/config.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<style id="style-1-cropbar-clipper">
			/* Copyright 2014 Evernote Corporation. All rights reserved. */
			.mui-card .mui-control-content {
				padding: 10px;
			}
			
			.mui-control-content {
				height: 100%;
				margin-bottom: 20px
			}
			
			.en-markup-crop-options {
				top: 18px !important;
				left: 50% !important;
				margin-left: -100px !important;
				width: 200px !important;
				border: 2px rgba(255, 255, 255, .38) solid !important;
				border-radius: 4px !important;
			}
			
			.en-markup-crop-options div div:first-of-type {
				margin-left: 0px !important;
			}
			
			.mui-content {
				margin-bottom: 60px !important;
			}
			
			.mui-card-header,
			.mui-card-media {
				overflow: hidden;
			}
			
			h4 {
				padding: 10px 0 0 10px;
				color: #666;
			}
			
			.ac_no {
				display: none !important;
			}
		</style>
	</head>

	<body>
		<div style="padding: 10px 10px;">
			<div id="segmentedControl" class="mui-segmented-control">
				<a class="mui-control-item mui-active" href="#item1">
					平台活动
				</a>
				<a class="mui-control-item" href="#item2">
					商家活动
				</a>
			</div>
		</div>
		<div class="mui-content">
			<p class="item1_no" style="text-align: center;font-size: 16px;background-color: initial;margin-top: 15px;color: #666;display: none;">暂无活动信息</p>
			<div class="actives">
				<div id="item1" class="mui-control-content mui-active activtion">
					<script type="text/html" id="p_active">
						{{if data.length<1}}
						<p class="item1_no" style="text-align: center;font-size: 16px;background-color: initial;margin-top: 15px;color: #666;">暂无活动信息</p>
						{{/if}}
						{{each data as value i}}
						<div class="mui-card active_car">
							<a href="#" data-id='{{value.id}}'>
								<h5 style="padding: 10px 0 0 10px;color: #000;">{{value.title}}</h5>
								<div class="mui-card-header mui-card-media">
									<img src="http://isv.tiaze.com{{value.image}}" width="100%">
								</div>
							</a>
						</div>
						{{/each}}
					</script>
				</div>
				<div id="item2" class="mui-control-content activtion">
					<script type="text/html" id="s_active">
						{{if data.length<1}}
							<p class="item1_no" style="text-align: center;font-size: 16px;background-color: initial;margin-top: 15px;color: #666;">暂无活动信息</p>
						{{/if}}
						{{each data as value i}}
							<div class="mui-card active_car">
								<a href="#" data-id='{{value.id}}'>
									<h5 style="padding: 10px 0 0 10px;color: #000;">{{value.title}}</h5>
									<div class="mui-card-header mui-card-media">
										<img src="http://isv.tiaze.com{{value.image}}" width="100%">
									</div>
								</a>
							</div>
						{{/each}}
					</script>
				</div>
			</div>
		</div>
		
		<script type="text/javascript" src="../js/template-web.js" ></script>
		<script>
			;
			$(document).ready(function() {
				muiBack();
				//点击切换
				mui("body").on("tap","#segmentedControl a",function(){
					if ($(this).hasClass("mui-active")) {
						return false;
					}
					$(".item1_no").css("display","none");
					if ($(this).index()==0) {
						//平台活动
						require(weburl + activeList, "json", "post", {
							token: localStorage.getItem("token"),
							page: 0,
							number: 10,
							flag: "h",
							category_id: 1
						}, function(e) {
							if((e.status == "success")&&(e.data.length>0)) {
								var html = template('p_active', e);
								$('#item1').html(html);
							}
						}, function(e) {
							$('#item1').html("");
							$(".item1_no").css("display","block");
						})
					}else{
						//商家活动
						require(weburl + activeList, "json", "post", {
							token: localStorage.getItem("token"),
							page: 0,
							number: 10,
							flag: "h",
							category_id: 2 //商家活动
						}, function(e) {
							if(e.status == "success") {
								var html = template('s_active', e);
								$('#item2').html(html);
							}
							console.log(JSON.stringify(e));
						}, function() {
							$('#item2').html("");
							$(".item1_no").css("display","block");
						})
					}
				})
				
				//平台活动
				require(weburl + activeList, "json", "post", {
					token: localStorage.getItem("token"),
					page: 0,
					number: 10,
					flag: "h",
					category_id: 1
				}, function(e) {
					$(".item1_no").css("display","none");
					if(e.status == "success") {
						var html = template('p_active', e);
						$('#item1').append(html);
					}
					console.log(JSON.stringify(e));
				}, function(e) {
					$(".item1_no").css("display","block");
				})
				
				mui("body").on("tap", ".active_car a", function() {
					var active_id = $(this).attr("data-id");
					mui.openWindow({
						url: "active_Detail.html",
						id: "active_Detail",
						extras: {
							"active_id": active_id
						}
					})
				})

			})
		</script>

	</body>

</html>